<template>
  <el-dialog title="选择课程" :visible.sync="dialogVisible" width="1000px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <div>
      <el-form :model="filterData" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col style="width: 240px;">
            <el-form-item label="课程名称">
              <el-input v-model="filterData.title" placeholder="课程名称" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col style="width: 300px;">
            <el-form-item label="课程类型">
              <el-select v-model="filterData.type" placeholder="课程类型" clearable>
                <el-option label="一对多" value="1"></el-option>
                <el-option label="一对一" value="2"></el-option>
                <el-option label="预约课" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="width: 180px;">
            <el-form-item label-width="0">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="border-bottom: 1px solid #eaeaea;"></div>
      </el-form>

      <div class="table-wraper">
        <el-table :data="tableData" ref="table" border style="height: 100%;" @select="handleSelection" @select-all="handleSelection">
          <el-table-column label="" align="center" type="selection"></el-table-column>
          <el-table-column label="序号" type="index" align="center" width="60px"></el-table-column>
          <el-table-column label="课程名称" prop="title" align="center" width="300px"></el-table-column>
          <el-table-column label="授课类型" align="center" width="100px">
            <template v-slot="scope">
              <span v-if="scope.row.type==1">一对多</span>
              <span v-if="scope.row.type==2">一对一</span>
              <span v-if="scope.row.type==3">预约课</span>
            </template>
          </el-table-column>
          <el-table-column label="计费方式" prop="rules" align="left">
            <template v-slot="scope">
              <div v-for="(item,index) in scope.row.rules" :key="index">
                {{item.title}} 按{{item.unit}} ({{item.total}}元{{item.count}}{{item.unit}})
                <span v-if="item.expvalue!=''">,有效期至 {{item.expvalue}}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;">
          <div style="flex: 1;">huizong</div>
          <div>
            <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
              layout=" prev, pager, next,sizes,total" :page-sizes="[20, 40, 60]" :total="numrows" :page-size="pagesize"
              :current-page="curpage" @size-change="handleSizeChange"
              @current-change="handleCurrentChange"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" style="text-align: center;">
      <el-button >取消</el-button>
      <el-button type="primary" :disabled="selectRow==null" @click="handleOK">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        pagesize: 20,
        curpage: 1,
        numrows: 1,
        createVisible: false,
        editVisible: false,
        selectRow:null,
        filterData: {
          title: '',
          type: '',
        },
        tableData: [

        ],
        dialogVisible: false,
      }
    },
    created() {
      this.loadDataList();
    },
    methods: {
      handleSelection(list,row){
        if(this.selectRow){
          this.$refs.table.toggleRowSelection(this.selectRow,false);
        }
        this.selectRow=row;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleQuery() {
        this.curpage = 1;
        this.loadDataList();
      },
      loadDataList() {
        const params = {
          curpage: this.curpage,
          pagesize: this.pagesize,
          title: this.filterData.title,
          type: this.filterData.type,
        }

        this.api_helper.post("api/admin/educational/course/list_by_page", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
            this.numrows = res.data.numrows;
          }
        })
      },
      handleOK() {
        this.dialogVisible=false;
        this.$emit("selectHandler",this.selectRow);
      },
    }
  }
</script>

<style scoped>
  .table-wraper{
    height:450px;
  }
</style>
